@import 'compass/utilities';
@import 'compass/css3';
@import 'sass/utils/mixins';
@import 'sass/utils/functions';

.Reaction {
    @include button-style--none;
    @include user-select(none);
    @include border-radius(4px);
    border: 1px solid transparent;
    background: v(center-channel-color-08);
    fill: v(center-channel-color-56);
    color: v(center-channel-color-64);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    min-width: 28px;
    height: 24px;
    margin: 0 4px 4px 0;
    padding: 0 5px;
    transition: border-color 100ms linear,
        background-color 100ms linear;
    &:hover {
        color: rgba(#3d3c40, 0.72);
        border: solid 1px rgba(#3D3C40, .16);
        background-color: transparent;
    }
    &:not(.Reaction--reacted) {
        &:hover {
            background-color: v(center-channel-bg);
            border-color: v(center-channel-color-16);
            color: v(center-channel-color-72);
            fill: v(center-channel-color-72);
        }
        &:active {
            background-color: v(button-bg-08);
            color: v(button-bg);
            fill: v(button-bg);
        }
    }
    &.Reaction--read-only {
        cursor: default;
    }
    &__add {
        font-size: 20px;
        line-height: 0;
        position: relative;
        vertical-align: middle;
    }
    &__emoji {
        margin: 0 2px 0 0;
        max-height: 16px;
        min-height: 16px;
        max-width: 16px;
        min-width: 16px;
        vertical-align: middle;
    }
    &__count {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-start;
        pointer-events: none;
        overflow: hidden;
        line-height: 16px;
    }
    &.Reaction--reacted,
    &.Reaction--reacting {
        color: v(button-bg);
        background-color: v(button-bg-08);
        border-color: v(button-bg);
        &:hover {
            border-color: v(button-bg);
            background: v(center-channel-bg);
        }
        &:active {
            background-color: v(button-bg-08);
            color: v(button-bg);
            fill: v(button-bg);
        }
    }
    &.Reaction--reacting {
        transition: border-color 200ms ease-in-out;
    }
    &.Reaction--unreacting {
        transition: border-color 200ms ease-in-out;
    }
    .Reaction__number {
        position: relative;
        &--display {
            display: inline-block;
        }
        &--reacted {
            position: absolute;
            display: none;
            top: 100%;
            left: 0;
        }
        &--unreacted {
            position: absolute;
            display: none;
            top: 0%;
            left: 0;
        }
    }
    &.Reaction--reacting {
        .Reaction__number--display {
            visibility: hidden;
        }
        .Reaction__number--reacted,
        .Reaction__number--unreacted {
            display: inline-block;
            animation-name: reacted-anim;
            animation-duration: 200ms;
            animation-fill-mode: forwards;
            animation-timing-function: ease-in-out;
        }
    }
    &.Reaction--unreacting {
        .Reaction__number--display {
            visibility: hidden;
        }
        .Reaction__number--reacted,
        .Reaction__number--unreacted {
            display: inline-block;
            animation-name: reacted-anim;
            animation-duration: 200ms;
            animation-fill-mode: forwards;
            animation-timing-function: ease-in-out;
            animation-direction: reverse;
        }
    }
}

@keyframes reacted-anim {
    from {transform:translateY(0%)}
    to {transform:translateY(-100%)}
}